<template>
  <van-nav-bar :title="t('shelve.title')" left-arrow @click-left="onClickLeft" placeholder fixed />
  <van-row>
    <van-col span="7">
      <van-dropdown-menu>
        <van-dropdown-item v-model="shelveType" :options="shelveTypeOptions" />
      </van-dropdown-menu>
    </van-col>
    <van-col span="17">
      <van-field ref="orderNoRef" v-model="orderNo" size="large" @keydown.enter="handleScan" :placeholder="t('shelve.pleaseScanOrderOrBoxNo')" clearable>
        <template #left-icon>
          <van-icon name="enlarge" size="1.5rem" class="px-2"/>
        </template>
      </van-field>
    </van-col>
  </van-row>
  <van-row class="px-5 py-2">
    <van-col>{{ t('shelve.toShelve') + totalNum }}</van-col>
  </van-row>
  <van-cell-group>
    <van-empty v-if="finished && orderList?.length <= 0" :description="t('noData')"/>
    <van-list v-else v-model:loading="loading" :finished="finished" :loading-text="t('loading')" :finished-text="t('noMoreData')" @load="onLoad" >
      <van-row class="p-5 van-hairline--surround" v-for="(item, i) in orderList" :key="i" @click="choose(item.orderId, item.orderNo)">
        <van-col span="18">{{ item.orderNo }}</van-col>
        <van-col class="text-right" span="6">{{ item.shelfStockingBoxNum + '/' + (item.shelfStockingBoxNum + item.receiptBoxNum) }}</van-col>
      </van-row>
    </van-list>
  </van-cell-group>
  <van-back-top />
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { postRequest, scanFail, scanSuccess } from "@/api";
import router from "@/router";

const { t } = useI18n();
const onClickLeft = () => history.back();


const shelveType = ref('SkuShelve');
const shelveTypeOptions = [
  { text: t('shelve.skuShelve'), value: 'SkuShelve' },
  { text: t('shelve.boxShelve'), value: 'BoxShelve' },
];

const totalNum = ref(0);
const orderList = ref([]);
const loading = ref(false);
const finished = ref(false);
const pageNo = ref(0);
const orderNo = ref();
const orderNoRef = ref();

onMounted(() => {
  orderNoRef.value.focus()
});

const onLoad = () => {
  pageNo.value += 1;
  postRequest("/orderInfo/getShelveOrderInfoPageList", { pageSize: 20, pageNo: pageNo.value }).then(res => {
    totalNum.value = res.data.totalRowNum
    if (res.data.orderInfoPageDTOList?.length > 0) {
      orderList.value = orderList.value.concat(res.data.orderInfoPageDTOList)
    } else {
      finished.value = true;
    }
    loading.value = false;
  }).catch(() => {
    loading.value = false;
    finished.value = true;
  })
};

const handleScan = () => {
  postRequest("/orderInfo/getShelveOrderInfoByNo", { number: orderNo.value }).then(res => {
    scanSuccess();
    router.push({
      name: shelveType.value,
      query: {
        orderId: res.data.orderId,
        orderNo: res.data.orderNo,
      }
    });
  }).catch(() => {
    scanFail();
  }).finally(() => {
    orderNo.value = null
  });
};

const choose = (orderId: string, orderNo: string) => {
  router.push({
    name: shelveType.value,
    query: {
      orderId,
      orderNo
    }
  });
}
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-dropdown-menu__bar) {
  box-shadow: none;
}
</style>
